Multimedia

HTML

Doelstelling

We hebben al geleerd hoe we een eenvoudige maar sematische webpagina maken. Met één webpagina zonder hyperlinks is nog geen website. Daarvoor moet je van de ene plaats naar een andere kunnen 'springen' .

In dit deel leggen we uit hoe je bestanden kan koppelen aan elkaar en hoe je binnen één enkel document verschillende tekstgedeelten met elkaar kan linken.

Links zijn de belangrijkste kracht van HTML en het internet. Zonder het bestaan van links zou het hele internet niet zijn wat het is.

Nu zorgt Hypertext ervoor dat de gebruiker maar één muisklik is verwijderd van de rest van de wereld.

Na deze les:

1. weet je wat links voor je kunnen doen, hoe je ze maakt en hoe je ze het beste inzet. Links zijn de schakels die webpagina's met elkaar verbinden. Je kunt linken binnen je eigen website, zelfs op één en dezelfde pagina evenals naar andere websites. Voor je bezoekers handig, want klikken op een link is een stuk makkelijker dan het intypen van een webadres. Op een website zet je links om bezoekers makkelijk door je site te leiden.
2. kan je links toegevoegen met de juiste semantiek!
3. weet je wanneer je en vooral wanneer je geen HTML attributen gebruikt;

Leerpad

1. Beginnen (of herhaling) met HTML
   1. Waarvoor dient HTML
   2. Overzicht
   3. HTML schrijven
   4. HTML commentaar
   5. HTML Basiselementen
   6. Semantische HTML
2. HTML Hyperlinks

Oefeningen

1. HTML sjabloon voor detail artikel
   Hier zie je een wireframe van de Marsman pagina die je help om de HTML indeling te maken.

Opdracht

1. Maak de oefening, de bloemlezing van Marsman, uit het lesmateriaal en plaats ze in de map met de naam html in een bestand met de naam marsman.html.
2. Kies een eigen artikel waarvoor een je webpagina gaat maken. Dat artikel is een onderwerp waarvoor je interesse hebt. Dat kan een automerk zijn of om het even welk ander onderwerp. Het gekozen artikel verdeel je onder in secties. Bijvoorbeeld een automerk heeft verschillende modellen.
3. Stel het gekozen onderwerp voor op het forum in de daarvoor voorziene thread, namelijk: Keuze artikel of onderwerp voor je eigen Marsmanpagina.
4. Deze webpagina plaats je in de map html en geef je een naam in kleine letters. De bestandsextensie is html. De naam zelf beschrijft duidelijk welk onderwerp/artikel je gekozen hebt.
5. Maak de html voor je eigen onderwerp. Bepaal de content voor de volgende elementen:
   1. header
   2. nav
   3. article
   4. section
   5. aside
   6. footer
   Je kan je baseren op HTML sjabloon voor detail artikel.
6. Zorg ervoor dat je minstens zes secties voor je artikel hebt.
7. Plaats links in een nav element in het aside element in je HTML pagina om naar de verschillende secties te navigeren.
8. Plaats links in een nav element in het header element om van de je eigen pagina naar de bloemlezing van Marsman te navigeren en omgekeerd.
9. Voeg in beide pagina's in het nav element in het header element, een link toe waarmee je terug kan keren naar de index.html pagina in de root van de website.
10. Plaats een link naar je eigen artikelpagina op de index.html pagina in de root van de website. De link plaats je in het HTML li element van het ol element dat we in de vorige les op deze pagina geplaatst hebben. Op die manier kan vanop de home pagina naar je eigen artikel pagina.

    
    <ol>
        <li><code><a href="html/marsman.html">Marsman bloemlezing</a></code></li>
        ...
    </ol>
    
    	

11. Maak de opdracht lokaal in Visual Studio Code en plaats de html map in de root van je workspace op Cloud9.